<template>
  <el-dialog
    v-el-drag-dialog
    title="瓶批单"
    :visible.sync="visible"
    width="1024px"
    @closed="reset"
  >
    <el-form ref="dataForm" class="form" :model="temp" label-position="right" label-width="80px">
      <el-form-item label="单号" prop="orderCode">
        <el-input v-model="temp.orderCode" disabled />
      </el-form-item>
      <el-form-item label="责任机构" prop="orgName">
        <el-input v-model="temp.orgName" disabled />
      </el-form-item>
      <el-form-item label="批发类型" prop="wsaleType">
        <el-input :value="wsaleType" disabled />
      </el-form-item>
      <el-form-item label="支付方式" prop="paymentMethod">
        <el-input :value="paymentMethod" disabled />
      </el-form-item>
      <el-form-item label="客户" prop="csmName">
        <el-input v-model="temp.csmName" disabled />
      </el-form-item>
      <el-form-item label="电话" prop="contactPhone">
        <el-input v-model="temp.contactPhone" disabled />
      </el-form-item>
      <el-form-item label="地址" prop="csmAddress">
        <el-input v-model="temp.csmAddress" disabled />
      </el-form-item>
      <el-form-item label="运费" prop="decimalSpare1">
        <el-input :value="Number(temp.decimalSpare1).toFixed(2)" disabled />
      </el-form-item>
      <el-form-item label="配送车辆" prop="truckNo">
        <el-input v-model="temp.truckNo" disabled />
      </el-form-item>
      <el-form-item label="司机" prop="driver">
        <el-input v-model="temp.driver" disabled />
      </el-form-item>
      <el-form-item label="押送员" prop="escortName">
        <el-input v-model="temp.escortName" disabled />
      </el-form-item>
    </el-form>
    <lb-table
      ref="lbTable"
      border
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      :summary-method="getSummaries"
      :immediate-fetch="false"
      show-summary
      @fetch="fetchData"
    />
  </el-dialog>
</template>

<script>
  import { queryWsaleOrderBill } from '@/api'

  export default {
    name: 'bottle-order-detail',
    data() {
      return {
        visible: false,
        wsaleTypeBottleMap: [{ 'value': 1, 'desc': '预约批发', 'key': 'TYPE1' }, { 'value': 2, 'desc': '上门批发', 'key': 'TYPE2' }],
        orderStatusMap: [{ 'value': -1, 'desc': '已作废', 'key': 'DELETE' }, { 'value': 2, 'desc': '未结单', 'key': 'NOPAY' }, { 'value': 10, 'desc': '已结单', 'key': 'PAY' }, { 'value': 12, 'desc': '已冲红', 'key': 'DO' }],
        paymentMethodMap: [{ 'value': 1, 'desc': '现金', 'key': 'MONEY' }, { 'value': 2, 'desc': '微信支付', 'key': 'WECHAT' }, { 'value': 16, 'desc': '月结', 'key': 'YJ' }, { 'value': 128, 'desc': '支付宝', 'key': 'ALIPAY' }, { 'value': 256, 'desc': '预付卡', 'key': 'CSMCARD' }, { 'value': 512, 'desc': '国志钱包', 'key': 'ICBCEPAY' }, { 'value': 1024, 'desc': '银行支付', 'key': 'ICBCPAY' }],
        temp: {
          orderCode: '',
          orgName: '',
          wsaleType: '',
          paymentMethod: '',
          csmName: '',
          contactPhone: '',
          csmAddress: '',
          decimalSpare1: '',
          truckNo: '',
          driver: '',
          escortName: ''
        },
        tableData: {
          total: 0,
          column: [
            {
              prop: 'goodsName',
              label: '商品'
            },
            {
              prop: 'specName',
              label: '规格型号'
            },
            {
              prop: 'gCount',
              align: 'right',
              label: '数量'
            },
            {
              prop: 'gdWeight',
              align: 'right',
              label: '每瓶重量(kg)'
            },
            {
              prop: 'netWeight',
              align: 'right',
              label: '总重量(吨)'
            },
            {
              prop: 'gPrice',
              align: 'right',
              label: '单价'
            },
            {
              prop: 'tReceivable',
              align: 'right',
              label: '金额'
            }
          ],
          data: []
        }
      }
    },
    computed: {
      wsaleType: function() {
        return this.wsaleTypeBottleMap.find(item => item.value === this.temp.wsaleType) ? this.wsaleTypeBottleMap.find(item => item.value === this.temp.wsaleType).desc : ''
      },
      paymentMethod: function() {
        return this.paymentMethodMap.find(item => item.value === this.temp.paymentMethod) ? this.paymentMethodMap.find(item => item.value === this.temp.paymentMethod).desc : ''
      }
    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp)
            this.$nextTick(() => {
              this.$refs.lbTable.fetch({ currentPage: 1 })
            })
          }
        })
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          orderCode: this.temp.orderCode
        }
        const res = await queryWsaleOrderBill(query)
        this.tableData.data = res.data.orderWsaleOrderDetailInfoList
      },
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          if (column.property === 'gdWeight' || column.property === 'gPrice') {
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          }
        })

        return sums
      },
      reset() {
        this.temp = {
          orderCode: '',
          orgName: '',
          wsaleType: '',
          paymentMethod: '',
          csmName: '',
          contactPhone: '',
          csmAddress: '',
          decimalSpare1: '',
          truckNo: '',
          driver: '',
          escortName: ''
        }
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    width: 33.3%;
    padding-right: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
</style>
